<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Bojler - Boilerplate With Hero</title>

		<!--[if gte mso 15]>
		<style type="text/css">
			table {
				font-size: 1px;
				line-height: 0;
				mso-margin-top-alt: 1px;
				mso-line-height-rule: exactly;
			}
			* {
				mso-line-height-rule: exactly;
			}
		</style>
		<![endif]-->

		<!--[if mso]>
		<style type="text/css">
			body,
			table,
			td {
				font-family: Arial, Helvetica, sans-serif !important;
			}
		</style>
		<![endif]-->

		<!--[if gte mso 9]>
		<xml>
			<o:OfficeDocumentSettings>
			<o:AllowPNG/>
			<o:PixelsPerInch>96</o:PixelsPerInch>
			</o:OfficeDocumentSettings>
		</xml>
		<![endif]-->

		<style data-embed>
			/**
			 * 1. Removing auto-generated blue links on Apple devices.
			 *    More info: http://removebluelinks.com
			 * 2. Force Outlook to provide a "View in browser" menu link.
			 * 3. Yahoo! Mail has a knack for picking keywords in emails and linking them to
			 *    advertising popups (blue, dotted links). This is how we remove them.
			 * 4. Force Hotmail to display normal line spacing.
			 *    More info: http://www.emailonacid.com/forum/viewthread/43
			 * 5. Force Hotmail to display emails at full width.
			 */

			a[x-apple-data-detectors] {
				/* 1 */
				color: inherit !important;
				text-decoration: none !important;
				font-size: inherit !important;
				font-family: inherit !important;
				font-weight: inherit !important;
				line-height: inherit !important;
			}

			#outlook a {
				padding: 0; /* 2 */
			}

			.yshortcuts a {
				border-bottom: none !important; /* 3 */
			}

			.ExternalClass {
				line-height: 100%; /* 4 */
			}

			.ExternalClass,
			.ExternalClass p,
			.ExternalClass span,
			.ExternalClass font,
			.ExternalClass td,
			.ExternalClass div {
				width: 100%; /* 5 */
			}
		</style>

		<link rel="stylesheet" href="css/main.css" data-inline />
	</head>
	<body>
		<table class="main-wrapper" width="100%" border="0" cellpadding="0" cellspacing="0">
			<tr>
				<td class="main-wrapper__inner" align="center" valign="top">
					<table class="container" width="660" align="center" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td class="hero" width="660" height="350" background="https://dummyimage.com/660x350/cccccc/858585.jpg">
								<!--[if gte mso 9]>
								<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 660px; height: 350px;">
								<v:fill type="frame" src="https://dummyimage.com/660x350/cccccc/858585.jpg" color="#ffffff" />
								<v:textbox inset="0, 0, 0, 0">
								<![endif]-->
								<table width="100%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td class="hero__inner">
											<table width="580" align="center" border="0" cellspacing="0" cellpadding="0">
												<tr>
													<td class="text-center">
														<h1>Title</h1>
													</td>
												</tr>
												<tr>
													<td class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
												</tr>
												<tr>
													<td>
														<table class="button mx-auto" border="0" cellpadding="0" cellspacing="0" align="center">
															<tr>
																<td>
																	<a href="#">Click me!</a>
																</td>
															</tr>
														</table>
													</td>
												</tr>
											</table>
										</td>
									</tr>
								</table>
								<!--[if gte mso 9]>
								</v:textbox>
								</v:rect>
								<![endif]-->
							</td>
						</tr>
					</table>
					<table class="container bg-white" width="660" align="center" border="0" cellpadding="0" cellspacing="0">
						<tr>
							<td class="column-12 is-first is-last">
								Hello World!<br>
								<img src="assets/images/example.png">
							</td><!-- /.column -->
						</tr>
					</table><!-- /.container -->
				</td><!-- /.main-wrapper__inner -->
			</tr>
		</table><!-- /.main-wrapper -->
	</body>
</html>
